<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            text-align: center;
        }

        table {
            margin: 0 auto;
            text-align: center;
        }

        thead {
            height: 50px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        姓名：
        <input type="text">
        科目：
        <input type="text">
        成绩：
        <input type="text">

        <button>添加学员信息</button>

        <table border="" width="900" cellpadding="0" cellspacing="0" id="tb">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbd">

            </tbody>
        </table>
    </div>
    <script>
        var box = document.querySelector('.box')
        var btn = document.querySelector('button')
        var tbd = document.querySelector('#tbd')
        var th = document.querySelectorAll('th')
        var inputs = document.querySelectorAll('input')
        btn.onclick = function () {
            //创建行
            var tr = document.createElement('tr')
            //添加行
            tbd.appendChild(tr)
            for (var i = 0; i < th.length - 1; i++) {
                //创建列
                if (inputs[i].value != '') {
                    var td = document.createElement('td')
                    td.innerHTML = inputs[i].value
                    tr.appendChild(td)
                } else {
                    if (inputs[0].value == '') {
                        alert('姓名不能为空')
                    } else if (inputs[1].value == '') {
                        alert('科目不能为空')
                    } else if (inputs[2].value == '') {
                        alert('成绩不能为空')
                    }
                    //如果有一个值为空，则删除这一行，不予添加
                    tbd.removeChild(tr)
                    break
                }
            }
            //创建一个td
            var td4 = document.createElement('td')
            td4.innerHTML = '<a href="javascript:;" class="del">删除</a> <a href="javascript:;" class="edi">编辑</a>'
            //添加到最后一列
            tr.appendChild(td4)
            //事件委托
            document.querySelector('#tbd').addEventListener('click', function (e) {
                if (e.target.className === 'del') {
                    e.target.parentNode.parentNode.remove()
                } else if (e.target.className === 'edi') {
                    var td3 = e.target.parentNode.parentNode.children[2]
                    
                    if (td3.children.length == 0) {
                        window.scrose = td3.innerHTML
                        td3.innerHTML = '<input type = "text"> <button class="bc">保存</button> <button class ="qx">取消</button>'
                    } else {
                        return
                    }
                   

                } else if (e.target.className === 'bc') {
                    //保存按钮
                    e.target.parentNode.innerHTML = e.target.parentNode.children[0].value
                    // var td = e.target.parentNode;
                     
                    // td.innerHTML = td.children[0].value;
                } else if (e.target.className === 'qx') {
                    //取消
                    // td3.innerHTML = window.scrose
                    var td = e.target.parentNode;
                    td.innerHTML = window.scrose
                }
            })


        }
    </script>
</body>

</html>